<template>
  <div class="driver-wrapper">
    <!--
        组件分为两种情况：
        1. isTypeValue== true
        2.type===2 的状况下 调用另一个接口，分页信息自己处理，后台不做干预
    -->

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :before-close="closeVisible"
      v-if="!isTypeCompany"
      :close-on-click-modal="false"
    >
      <div class="dialog-container">
        <div class="container">
          <section  class="dialogSearch">
              <el-input v-model="inputName" :placeholder="holder" @input=" getList2 ($event,true)">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            <el-table
              size="mini"
              v-loading="loading||tabLoading"
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="names"
                label="名称"

                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="countyCode"
                label="地区"
                align="left"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作"  width="75px">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                  >选择
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              layout="total,prev, pager, next"
              :total="page.total"
            >
            </el-pagination>
          </section>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px  "
      class="tableDialog"
      :before-close="closeVisible"
      v-if="isTypeCompany"
      :close-on-click-modal="false"
    >
      <div class="dialog-container">
        <div class="container">
          <section  class="dialogSearch">
              <el-input v-model="inputName" :placeholder="holder" @input="handleSearch">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            <el-table
              size="mini"
              v-loading="tabLoading"
              :data="newTabelData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="countyCode"
                label="地区"
                align="left"
                :show-overflow-tooltip="true"
                v-if="title !== '选择产品'"
              >
              </el-table-column>
              <el-table-column label="操作"  width="75px">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                  >选择
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleNewCurrentChange"
              :page-size="newDataPage.pageSize"
              :current-page="newDataPage.pageNo"
              layout="total,prev, pager, next"
              :total="newDataPage.total"
            >
            </el-pagination>

          </section>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getWindowList, dynamicWindowList} from '@/api/market/crm.js'

  export default {
    data () {
      return {
        isTypeCompany: false,       // 是否需要前端自己传 sql 语句
        newDataPage: {
          pageSize: 10,
          pageNo: 1
        },                           // 新的分页数据设置
        newData: [],                 // 新的数据list全部数据
        newTabelData: [],            // 根据前端设置的分页情况处理的数据list
        itemDictCode: '',            // 需要使用的sql数据，可在父组件定义，默认是空
        tableData: [],
        loading: false,
        tabLoading: false,
        dialogVisible: false,
        inputName: '',
        data: [],
        title: '选择客户',
        mark: '',
        holder: '',
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        }

      }
    },
    watch: {
      mark () {
        if (this.mark) {
          this.holder = '请输入' + this.mark + '名称'
        }
      }
    },
    methods: {
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getCompanyList(this.page)
      },
      getPlaceholder () {
        const placeholder = '请输入' + this.mark + '名称'
        return placeholder
      },
      // 获取列表
      getCompanyList (params) {
        this.loading = true
        getWindowList({
          state: 1,
          // pageSize: params.pageSize,
          pageSize: params.pageSize,  // -1 不分页
          pageNo: params.pageNo
        }).then((res) => {
          if (res.data.code == '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
          this.loading = false

        }).catch(err => {
          this.loading = false

        })
    },
      // 获取列表 （传sql 数据）
      getDynamicWindowList () {
        this.tabLoading = true
        dynamicWindowList({
          keySQL: this.itemDictCode
        }).then((res) => {
          if (res.data.code === '200') {
            this.newData = res.data.result.dataList
            this.newDataPage.total = this.newData.length
            this.handleNewCurrentChange()
            this.tabLoading = false
          }
        }).catch(err => {
          this.tabLoading = false
        })
    },
      // 分页数据整理
      handleNewCurrentChange (e) {
        this.newDataPage.pageNo = e || this.newDataPage.pageNo
        this.newTabelData = this.newData.slice(
          (this.newDataPage.pageNo - 1) * this.newDataPage.pageSize,
          this.newDataPage.pageSize * this.newDataPage.pageNo
        )
      },
      // 筛选列表中的数据
      handleSearch (e) {
        this.tabLoading = true

        if (e) {
        const value = e
        const expandedKeys = this.newData
          .map(item => {
            if (item.name.indexOf(value) > -1) {
              return item
            }
            return null
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          newTabelData: expandedKeys
        })
          this.tabLoading = false
        } else {
          this.handleNewCurrentChange()
          this.tabLoading = false
        }
      },

      // 点击树获取列表和搜索获取列表
      getList2 ($event, isSearch) {
        this.tabLoading = true
        if (isSearch) {
          getWindowList({names: $event}).then((res) => {
            if (res.data.code == '200') {
              this.tableData = res.data.result.list
              this.page.total = res.data.result.count
            }
            this.tabLoading = false
          }).catch(err => {
            this.tabLoading = false
          })
        }
      },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
          this.$emit('getCompanyData', row)
        Object.assign(this.$data.newDataPage, this.$options.data().newDataPage)
        this.closeVisible()
    },
      closeVisible () {
        this.inputName = ''
      this.dialogVisible = false
      },

      handleClose (done) {
        done()
      },
      // 初始化数据
      initData () {
        this.dialogVisible = true
        if (this.isTypeCompany) {
          this.getDynamicWindowList()
        } else {
          this.getCompanyList(this.page)
        }
        this.mark = '客户'
      }
    },
//     mounted () {
// this.initData()
//     }
  }
</script>
<style scoped lang="scss">
  ::v-deep .el-pagination {
    margin-top: 30px;
    text-align: right;
}
    .driver-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        padding: 20px 20px 24px !important;
      }
    }
  }
  .dialog-container {
    width: 100%;
  }

  .container {
    width: 100%;
    /*height: 500px;*/
    display: flex;
  }

  .left-container {
    margin-right: 20px;
    width: 100px;
    overflow: auto; /*当内容超过，出现滚动条*/
  }

  .dialog-footer {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
